<template id="fruits">
    <div class="fruit">
       <!-- <v-head></v-head>-->
        <div id="fruit_1">
       <div class="fruits_con">
           <img src="../image/banner.jpg" alt="">
       </div>
        <div class="fruits">
            <ul class="f_time">
                <li v-for="(v,k) in goods_list" v-bind:class="k == now_time ? 'selected' : ''" @click="switchNowTime(k)">{{k}}</li>
            </ul>
            <ul class="f_start">
                <li v-for="(v,k) in goods_list" v-bind:class="k == now_time ? 'selected' : ''" @click="switchNowTime(k)">
                    {{v.is_finish == 1 ? '已售完' : status_name[ v.time_slot ]}}
                </li>
            </ul>
            <div class="x_b"></div>
            <!--<div class="swiper-container swiper1">
				<div class="swiper-wrapper">
					<div class="swiper-slide selected">推荐</div>
					<div class="swiper-slide">菜单 2</div>
					<div class="swiper-slide">菜单 3</div>
					<div class="swiper-slide">菜单 4</div>
					<div class="swiper-slide">菜单 5</div>
				</div>-->
            <div id="fruits_list">
                <div class="swiper-container" id="myswiper2">
                           <div class="swiper-wrapper">
                               <div class="swiper" @click="classGoods(v.id)" v-for="v in cat_list">{{v.name}}</div>
                           </div>
                </div>
            </div>
            <!--<ul class="fruits_list">
                <li @click="classGoods(v.id)" v-for="v in cat_list">{{v.name}}</li>
            </ul>-->
            <div class="list_f" v-for="(v,k) in goods_list" v-bind:style="k == now_time ? 'display:block;' : ''">
                <div class="f_food" v-for="line in v.data">
                    <div class="apple_img">
                        <img :src="line.goods_thumb" alt="" @click="getDetail(line.goods_id)">
                    </div>
                    <div class="img_right">
                        <p>{{line.goods_name}}</p>
                        <p>{{line.goods_brief}}</p>
                        <p class="p_3">
                            <span>￥{{line.promote_price}}/</span>
                            <span>{{line.goods_share}}</span> <span>￥{{line.shop_price}}</span>
                        </p>
                        <div class="d_list">
                            <dl>
                                <dt>还剩{{line.goods_number}}份</dt>
                                <dd></dd>
                            </dl>
                            <button @click="addCart(line.goods_id,line.goods_thumb)">立即抢购</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        </div>
       <!-- <v-footer></v-footer>-->
    </div>
</template>
<script>
   /* import head from './head.vue';*/
   /* import banner from './banner.vue';*/
  /*  import footer from './footer.vue';*/
    export default{
        name:'fruits',
        components:{
          /*  'v-head':head,*/
          /*  'v-banner':banner,*/
           /* 'v-footer':footer*/
        },
        data(){
            return{
                status_name:{'-1':'已结束', '0':'未开始', '1':'进行中'},
                goods_list:[],
                cat_list:[],
                banners:[],
                now_time:'',
            }
        },
        mounted:function(){
            let H = $(window).height()-100
            $('#fruit_1').height(H)
            var fruits_list = new Swiper('#myswiper2', {
                freeMode: true,
                freeModeMomentumRatio: 0.5,
                slidesPerView: 'auto',
            });
            this.$http.jsonp(
                this.GLOBAL.BaseUrl+'/mobile/api/v1/FlashSale.php?mode=fruit',
                {jsonp:'callback'}
            ).then(function (res) {
                this.goods_list = res.body.data.goods_list;
                this.cat_list = res.body.data.cat_list;
                this.banners = res.body.data.banners;
                this.now_time = res.body.data.now_time;
            });
        },
        methods:{
            switchNowTime:function (val) {
                this.now_time = val;
            },
            classGoods:function(id){
                 this.$router.push('/list?cat_id='+id)
            },
            addCart:function(goods_id,image, number = 1){
                this.GLOBAL.addCart(this,goods_id,number);
                this.GLOBAL.get_te(image)
            },
            getDetail:function(id){
                this.$router.push('/shopDetails?goods_id='+id);
            },
        },
    }

</script>
<style>
    .flyer-img{height:50px;width:50px;border-radius: 50%;}
    #fruit_1{
        overflow-y: scroll;
    }
   /* .fruit{
        overflow-x:hidden;
         overflow-y:hidden;
        -webkit-overflow-scrolling: touch;
    }*/
    .fruits_con{
        width:100%;
        height:3.12rem;
    }
    .fruits_con img{
        display:block;
        width:100%;
        height:3.12rem;
    }
    .list_f .f_food:nth-last-of-type{
        margin:0;
    }
    .list_f{
        display: none;
    }
    .f_food{
        height:1.18rem;
        width:100%;
        margin-bottom:1rem;
    }
.fruits{
    min-height:5rem;
    width:100%;
}
.d_list{
    height:0.56rem;
    width:3.33rem;
}
.d_list dl{
    width:1.2rem;
    height:0.56rem;
    float:left;
}
.d_list dl dt{
    height:0.15rem;
    color:#7c7c7c;
    font-size:0.15rem;
    line-height:0.15rem;
    margin-bottom:6px;
}
.d_list dl dd{
    height:0.1rem;
    width:1.08rem;
    background:#ff7b56;
    border-radius:5px;
}
.d_list button{
    float:left;
    width:1.36rem;
    height:0.33rem;
    color:#ffe6e1;
    background:#ff7043;
    border:0;
    font-weight:700;
    border-radius:10px;
    margin-top:0.1rem;
    margin-left:0.15rem;
    outline:none;
}
.p_3{
    height:0.5rem;
    line-height:0.5rem;
}
.p_3 span{
    float:left;
}
.p_3 span:nth-of-type(1){
    height:0.5rem;
    line-height:0.5rem;
    color:#ff4800;
    font-size:0.2rem;
    width:0.8rem;
}
.p_3 span:nth-of-type(2){
    height:0.5rem;
    line-height:0.5rem;
    color:#ff4800;
    font-size:0.18rem;
}
.p_3 span:nth-of-type(3){
    height:0.5rem;
    line-height:0.5rem;
    color:#b8b8b8;
    font-size:0.15rem;
    text-decoration: line-through;
    margin-left: 0.1rem;
}
.apple_img{
    height:1.8rem;
    width:2.67rem;
    float:left;
}
.apple_img img{
    display:block;
    height:1.8rem;
    width:1.8rem;
    overflow:hidden;
    margin:0 0.36rem 0.05rem 0.5rem;
}
.img_right{
    height:1.8rem;
    width:3.33rem;
    float:right;
}
.img_right p:nth-of-type(1){
    height:0.3rem;
    line-height:0.3rem;
    color:#4a4a4a;
    font-size:0.3rem;
    font-weight:700;
}
.img_right p:nth-of-type(2){
    height:0.5rem;
    line-height:0.5rem;
    color:#333;
    font-size:0.22rem;
}
.list_f{
    min-height:4rem;
}
 #fruits_list ,.swiper-container,.swiper-wrapper{
        width:100%;
        display:flex;
        height:0.5rem;
        margin-bottom: 0.48rem;
    }
    #fruits_list .swiper-container{
        overflow: visible;
    }
#fruits_list .swiper{
    line-height:0.5rem;
    text-align:center;
    color:#bababa;
    font-size:0.19rem;
    width:1.4rem;
    height:0.5rem;
    background:#ececec;
    margin: 0.08rem 0.1rem;
    border-radius:0.07rem;
}
.x_b{
    height:1px ;
    background:#d7d7d7;
    width:6rem;
    margin:0 0.2rem  0.22rem 0.2rem;

}
.f_start{
    height:0.39rem;
    display:flex;
    margin:0;
    padding:0;

}
.f_start li{
    flex:1;
    color:#a4a4a4;
    list-style:none;
    line-height:0.39rem;
    text-align:center;
    font-size:0.22rem;

}
    .f_time{
        height:0.32rem;
        display:flex;
        margin:0.28rem 0 0 0;
        padding:0;
    }
.f_time li{
    flex:1;
    list-style:none;
    font-size: 0.2rem;
    line-height:0.15rem;
    text-align:center;
    color:#a4a4a4;

}
    .f_time li.selected{
        color: #000000;
    }
    .f_start li.selected{
        color: #000000;
        border-bottom: 1px solid #1b6e1f;
    }
</style>
